<template>
	<div class="commoditysearchstyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>

		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<!-- 表单 -->
				<el-form label-width="80px" :model="datas" style="margin-top: 10px">
					<el-form-item class="lef" label="提示内容">
						<el-input v-model="datas.placeholder" placeholder="请输入提示内容"> </el-input>
					</el-form-item>
					<el-form-item class="lef" label="圆角">
						<el-slider v-model="datas.borderRadius" show-input style="margin-left: 15px" />
					</el-form-item>

					<vuedraggable :list="datas.keywords" item-key="index" :forceFallback="true" :animation="200">
						<template #item="{ element }">
							<section class="imgList">
								<van-icon class="el-icon-circle-close" name="close" @click="deleteHotords(index)" />
								<!-- 标题和链接 -->
								<div class="imgText">
									<el-form-item class="lef" label="关键字">
										<el-input v-model="element.text" placeholder="请输入热词">
											<template #append> <el-color-picker v-model="element.color" /></template>
										</el-input>
									</el-form-item>
								</div>
							</section>
						</template>
					</vuedraggable>

					<!-- 添加热词 -->
					<el-button @click="addHotords" class="uploadImg" type="primary" plain>点击添加热词</el-button>

					<div style="height: 20px" />

					<!-- 显示位置 -->
					<el-form-item class="lef" label="显示位置">
						<div class="weiz">
							<span>{{ datas.position === 0 ? '正常模式' : '滚动至顶部固定' }}</span>
							<div>
								<el-tooltip
									effect="dark"
									:content="index - 1 === 0 ? '正常模式' : '滚动至顶部固定'"
									placement="bottom"
									v-for="index in 2"
									:key="index"
								>
									<i
										class="iconfont"
										:class="[index - 1 === 0 ? 'icon-wangye1' : 'icon-zhiding', datas.position === index - 1 ? 'active' : '']"
										@click="datas.position = index - 1"
									/>
								</el-tooltip>
							</div>
						</div>
					</el-form-item>

					<!-- 框体样式 -->

					<!-- 文本位置 -->
					<el-form-item class="lef" label="文本位置">
						<div class="weiz">
							<span>{{ datas.textPosition === 0 ? '居左' : '居中' }}</span>
							<div>
								<el-tooltip effect="dark" :content="index - 1 === 0 ? '居左' : '居中'" placement="bottom" v-for="index in 2" :key="index">
									<i
										class="iconfont"
										:class="[index - 1 === 0 ? 'icon-horizontal-left' : 'icon-juzhong', datas.textPosition === index - 1 ? 'active' : '']"
										@click="datas.textPosition = index - 1"
									/>
								</el-tooltip>
							</div>
						</div>
					</el-form-item>

					<!-- 扫一扫 -->
					<el-form-item class="lef" label="扫一扫">
						{{ datas.sweep ? '显示' : '隐藏' }}
						<el-checkbox style="margin-left: 196px" v-model="datas.sweep" />
					</el-form-item>

					<div style="height: 10px" />

					<!-- 框体高度 -->
					<el-form-item label="框体高度" class="lef borrediu">
						<el-slider v-model="datas.heights" :max="50" :min="28" input-size="small" show-input> </el-slider>
					</el-form-item>

					<!-- 背景颜色 -->
					<el-form-item class="lef" label="背景颜色">
						<!-- 颜色选择器 -->
						<el-color-picker v-model="datas.backgroundColor" show-alpha class="picke" :predefine="predefineColors"> </el-color-picker>
					</el-form-item>

					<!-- 框体颜色 -->
					<el-form-item class="lef" label="框体颜色">
						<!-- 颜色选择器 -->
						<el-color-picker v-model="datas.borderColor" show-alpha class="picke" :predefine="predefineColors"> </el-color-picker>
					</el-form-item>

					<div style="height: 10px" />

					<!-- 文本颜色 -->
					<el-form-item class="lef" label="文本颜色">
						<!-- 颜色选择器 -->
						<el-color-picker v-model="datas.textColor" show-alpha class="picke" :predefine="predefineColors"> </el-color-picker>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import vuedraggable from 'vuedraggable'; //拖拽组件

export default {
	name: 'commoditysearchstyle',
	props: {
		datas: Object,
	},
	components: { vuedraggable },
	data() {
		return {
			predefineColors: [
				// 颜色选择器预设
				'#ff4500',
				'#ff8c00',
				'#ffd700',
				'#90ee90',
				'#00ced1',
				'#1e90ff',
				'#c71585',
				'#409EFF',
				'#909399',
				'#C0C4CC',
				'rgba(255, 69, 0, 0.68)',
				'rgb(255, 120, 0)',
				'hsv(51, 100, 98)',
				'hsva(120, 40, 94, 0.5)',
				'hsl(181, 100%, 37%)',
				'hsla(209, 100%, 56%, 0.73)',
				'#c7158577',
			],
		};
	},
	methods: {
		/* 添加热词 */
		addHotords() {
			this.datas.keywords.push({
				text: '',
				color: '#8C8C8C',
			});
			this.$emit('refreshScroll');
		},
		/* 删除热词 */
		deleteHotords(index) {
			this.datas.keywords.splice(index, 1);
		},
	},
	mounted() {
		this.$emit('refreshScroll');
	},
};
</script>

<style scoped lang="scss">
.commoditysearchstyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	/* 上传图片按钮 */
	.uploadImg {
		width: 100%;
		height: 40px;
		margin-top: 10px;
	}

	/* 热词列表 */
	.imgList {
		padding: 6px 12px;
		margin: 16px 7px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
		display: flex;
		position: relative;

		/* 删除图标 */
		.el-icon-circle-close {
			position: absolute;
			right: -8px;
			top: -10px;
			cursor: pointer;
			font-size: 19px;
		}

		/* 热词文字 */
		.imgText {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			justify-content: space-between;
		}
	}

	/* 图片样式 */
	.weiz {
		display: flex;
		justify-content: space-between;
		i {
			padding: 5px 14px;
			margin-left: 10px;
			border-radius: 0;
			border: 1px solid #ebedf0;
			font-size: 20px;
			font-weight: 500;
			cursor: pointer;

			&:last-child {
				font-size: 22px;
			}

			&.active {
				color: #155bd4;
				border: 1px solid #155bd4;
				background: #e0edff;
			}
		}
	}

	.lef {
		:deep(.el-form-item__label) {
			text-align: left;
		}
	}

	/* 颜色选择器 */
	.picke {
		float: right;
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}
</style>
